<template>
  <div class="home-content">
    <Row>
      <Col :xs="24" :sm="24" :md="24" :lg="17">
        <div class="layout-left">
          <section-title :mainTitle="'题库'">
            <title-menu-filter
              @filterByMenu="getList"
              slot="menu"
              :menu-filter-list="defaultFilterList"
              :show="false"
            ></title-menu-filter>
          </section-title>
          <div class="cells">
            <code-list-cell
              v-for="(code, index) in codeList"
              :problem="code"
              :key="code.id"
            ></code-list-cell>
          </div>
        </div>
      </Col>
      <Col :xs="0" :sm="0" :md="0" :lg="7">
        <div class="layout-right">
          <about></about><br/>
          <friend-links></friend-links><br/>
          <recommend></recommend><br/>
        </div>
        <div class="layout-left"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import PhotoWall from "@/components/views/PhotoWall";
import ProblemListCell from "@/components/views/problem/ProblemListCell";
import SectionTitle from "@/components/views/SectionTitle/SectionTitle";
import TitleMenuFilter from "@/components/views/SectionTitle/TitleMenuFilter";
import About from "@/components/views/About";
import FriendLinks from "@/components/views/FriendLinks";
import TagWall from "@/components/views/TagWall";
import Recommend from "@/components/views/Recommend";
import {DefaultFilterList} from "@/assets/js/const";
import {problemPage} from "@/api/oj/problem";
import VueCookie from "js-cookie";

export default {
  metaInfo: {
    title: "CODER-OJ",
  },
  data() {
    return {
      codeList: [],
      defaultFilterList: DefaultFilterList,
      total: null,
      listQuery: {
        userId: VueCookie.get('userInfo') == null ? null : JSON.parse(VueCookie.get('userInfo')).id,
        page: 1,
        pageSize: 10,
        status: 1,
        name: this.$route.query.name,
        source: this.$route.query.name,
      },
    };
  },
  components: {
    "photo-wall": PhotoWall,
    "code-list-cell": ProblemListCell,
    "section-title": SectionTitle,
    "title-menu-filter": TitleMenuFilter,
    about: About,
    "friend-links": FriendLinks,
    "tag-wall": TagWall,
    recommend: Recommend,
  },
  created() {
    this.getList(this.listQuery);
  },
  mounted() {
    this.$nextTick(() => {
      document.querySelector(".main-wrapper").style.margin = "61px auto";
    });
  },
  methods: {
    changePage(page) {
      this.listQuery.page = page;
      this.getList();
    },
    changeSize(size) {
      this.listQuery.pageSize = size;
      this.listQuery.page = 1;
      this.getList();
    },
    getList(param) {
      problemPage(param).then(res => {
        this.codeList = res.result.list;
        this.total = res.result.total;
      });
    },
  },
  watch: {
    $route () {
      this.$router.go()
    }
  }
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.ivu-modal-footer {
  display: none !important;
}

.cells {
  background-color: rgba(255, 255, 255, 0.6);
  padding-top: 35px;
  padding-bottom: 50px;
  border-radius 8px;
}

.home-content {
  width: auto;
  min-height: calc(100vh - 108px);

  @media only screen and (max-width: 768px) {
    margin: 5px 5px 0 5px;
  }

  @media screen and (min-width: 768px) {
    margin: 10px 10px 0 10px;
  }

  @media screen and (min-width: 992px) {
    margin: 15px 35px 0 35px;
  }

  @media screen and (min-width: 1200px) {
    width: 1200px;
    margin: 15px auto 0;
    margin-bottom: 200px;
  }

  .layout-left, .layout-right {
    padding: 0;

    @media only screen and (max-width: 768px) {
      padding: 0;
    }

    @media screen and (min-width: 768px) {
      padding: 0;
    }

    @media screen and (min-width: 992px) {
      padding: 0 10px;
    }

    @media screen and (min-width: 1200px) {
      padding: 0 10px;
    }
  }
}

/* .live-bg{
  background-image:url({{this.imgUrl}})
} */
</style>
